<template>
  <div class="qwe">
    <div class="o" v-for="(item, index) in list" :key="index">
      <div
        :class="{ active: gaoliang === i }"
        @mouseover="yiru(i)"
        @mouseleave="mouseleave"
        v-for="(t, i) in item"
        :key="i"
      >
        <a href="#" onclick="onname(item.name)">{{ t.name }}</a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, inject } from "vue";

let gaoliang = ref("");
let list = ref([JSON.parse(localStorage.getItem("key"))]);
// let list = filterList.value

const name = inject("list");

//
const filterList = computed(() => {
  return JSON.parse(localStorage.getItem("key"));
});
function yiru(i) {
  gaoliang.value = i;
  // console.log(filterList.value);
  console.log(name._rawValue);
}
function mouseleave() {
  gaoliang.value = "";
}
</script>

<style scoped>
.qwe {
  width: 423px;
  /* height: 300px; */
}
.o {
  padding: 6px;
}
a {
  font-size: 4px;
}
.active {
  padding: 6px;
  background-color: #f8f5f0;
}
</style>
   